//封装一个element表格组件

import React, { useEffect, useState } from 'react';
import { Space, Table, } from 'antd';
import type { TableProps } from 'antd';
import { useNavigate } from 'react-router-dom';

interface DataType {
    key: string;
    name: string;
    nei: string;
    rusult: string;
    riqi: string;
    man: string;
}


const data: DataType[] = [
    {
        key: '1',
        name: '闸一',
        nei: '管道路线',
        rusult: '隐患',
        riqi: '2025-05-01',
        man: '张三',
    },
    {
        key: '2',
        name: '闸二',
        nei: '闸门',
        rusult: '隐患',
        riqi: '2025-04-01',
        man: '王五',
    },
    {
        key: '3',
        name: '闸三',
        nei: '内容',
        rusult: '正常',
        riqi: '2025-08-01',
        man: '李四',
    },
];



interface Props {
    timer: [string, string];
    State: string;
}


const App: React.FC<Props> = ({ timer, State }) => {


    const columns: TableProps<DataType>['columns'] = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            render: (text, record, index) => {
                return index + 1;  // 返回行的序号，通常从0开始，所以加1
            },
        },
        {
            title: '路线名称',
            dataIndex: 'name',
            key: 'name',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '检查内容',
            dataIndex: 'nei',
            key: 'nei',
        },
        {
            title: '检查结果',
            dataIndex: 'rusult',
            key: 'rusult',
            render: (value) => {
                if (value === '隐患') {
                    return <span style={{ color: 'red' }}>{value}</span>;
                } else {
                    return <span style={{ color: 'green' }}>{value}</span>;
                }
            },
        },
        {
            title: '检查日期',
            dataIndex: 'riqi',
            key: 'riqi',
        },
        {
            title: '巡查人员',
            dataIndex: 'man',
            key: 'man',
        },

        {
            title: '操作',
            key: 'action',
            render: (text) => (
                <Space size="middle">
                    <button onClick={() => dian(text)} style={{ color: '#1890ff', border: 'none', background: 'none' }}>查看</button>

                </Space>
            ),
        },
    ];

    const navigate = useNavigate();
    const dian = (val: DataType) => {
        navigate('/service/Operational/security/gui', { state: val });
    }

    //搜索
    const [filteredData, setFilteredData] = useState<DataType[]>([]);

    useEffect(() => {
        const filtered = data.filter((item) => {
            // 检查 item 的日期是否在 timer 范围内
            const isInDateRange = item.riqi.includes(timer[0].slice(0, 10)) && item.riqi.includes(timer[1].slice(0, 10));
            // 检查 item 的状态是否与 State 匹配
            const matchesState = item.rusult.includes(State);
            // 如果满足任何一个条件，就返回该项
            if (isInDateRange && matchesState) {
                return true;
            }

            return false;
        });

        // 将筛选结果存储到 state 中
        setFilteredData(filtered);

    }, [timer, State]);



    return (
        <Table<DataType> columns={columns} dataSource={filteredData} pagination={false} />
    );
}

export default App;